<template>
  <div class="dataAudit">
    <haz-tree @selected="categoryCheckHandler"/>
    <div style="flex: 1">
      <el-card shadow="never" :body-style="{padding:'0px'}">
        <div slot="header" class="header_div">
         <div class="radio-t">
                <el-radio-group v-model="formData.dataStatus" size="mini" @change="statusChangeHandler">
                  <el-radio-button label="">全部</el-radio-button>
                  <el-radio-button label="0">待审核</el-radio-button>
                  <el-radio-button label="1">待上报</el-radio-button>
                  <el-radio-button label="2">待驳回</el-radio-button>
                  <el-radio-button label="3">已上报</el-radio-button>
                </el-radio-group>
          </div>
          <div v-if="columns.length">
            <el-button size="small" plain type="primary" @click="showApprovalModal('1')">通过</el-button>
            <el-button size="small" plain type="primary" @click="showApprovalModal('0')">驳回</el-button>
            <el-button size="small" plain type="primary" @click="showErrorModal('1')">批量标错</el-button>
            <el-button size="small" plain type="primary" @click="showErrorModal('0')">撤销标错</el-button>
            <el-button size="mini" type="primary" @click="isExpand=!isExpand">高级搜索</el-button>

          </div>
        </div>
        <div class="ha-top" v-if="columns.length && isExpand" >
          <el-row :gutter="10" v-if="isExpand">

            <el-col :span="24" class="m-b10" v-if="isExpand">
              <div class="radio-t">

                <el-radio-group v-model="formData.checkResult" size="mini">
                  <el-radio-button label="">全部</el-radio-button>
                  <el-radio-button label="0">质检未过</el-radio-button>
                  <el-radio-button label="1">质检存疑</el-radio-button>
                  <el-radio-button label="2">质检已过</el-radio-button>
                  <el-radio-button label="3">未质检</el-radio-button>
                  <el-radio-button label="4">质检中</el-radio-button>
                  <el-radio-button label="5">核查已标错</el-radio-button>
                  <el-radio-button label="6">专家抽检已标错</el-radio-button>
                </el-radio-group>
                <el-input
                  placeholder="名称搜索"
                  size="small"
                  v-model="formData.code" style="width: 100px;">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-input
                    placeholder="请输入创建人"
                    size="mini"
                    v-model="formData.createBy" style="width: 100px;">
                  <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-input
                  placeholder="唯一码搜索"
                  size="mini"
                  v-model="formData.originId" style="width: 100px;">
                <i slot="suffix" class="el-input__icon el-icon-search" ></i>
              </el-input>

              </div>

            </el-col>
            <el-col :span="4" class="m-b10" v-if="isExpand">
              <el-select v-model="formData.errorLevel" placeholder="标错级别" size="mini" clearable>
                <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4" class="m-b10" v-if="isExpand">
              <el-select v-model="formData.checkErrorLevel" placeholder="核查标错级别" size="mini" clearable>
                <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4" class="m-b10" v-if="isExpand">
              <el-select v-model="formData.editCases" placeholder="标错修改情况" size="mini" clearable>
                <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4" class="m-b10" v-if="isExpand">
              <el-select v-model="formData.checkCases" placeholder="合适情况" size="mini" clearable>
                <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4" class="m-b10" v-if="isExpand">
              <el-select v-model="formData.areaId" placeholder="地市" size="mini" clearable>
                <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4" class="m-b10" v-if="isExpand">
              <el-button size="mini" type="primary" @click="search">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <el-empty v-if="!columns.length"/>
        <dynamic-data-table
            v-if="columns.length"
            :api="getApprovalList"
            ref="dataTable"
            :options="options"
            :columns="columns"
            :operates="operates"
            :query="formData"
        ></dynamic-data-table>
      </el-card>
    </div>
    <data-approval-modal ref="DataApprovalModal" :workId="this.workId" @success="search" :categoryId="categoryId" :categoryLevel="categoryLevel"/>
    <error-modal ref="errorModal" :workId="this.workId" :categoryId="categoryId" :categoryLevel="categoryLevel"/>
  </div>
</template>

<script lang="ts">
import {Component, Ref, Vue} from 'vue-property-decorator';
import HazTree from "@/views/quality/components/HazTree.vue";
import DynamicDataTable from "@/components/DataTable/DynamicDataTable.vue";
import NTitle from "@/components/NTitle.vue";
import {getApprovalList, getApprovalTitle} from "@/api/dataSearch";
import DataApprovalModal from "@/views/quality/components/DataApprovalModal.vue";
import ErrorModal from "@/views/quality/components/ErrorModal.vue";
@Component({
  methods: {getApprovalList},
  components: {NTitle, DynamicDataTable, HazTree, DataApprovalModal,ErrorModal}
})
export default class dataUpdate extends Vue {
  private isExpand = false;
  @Ref('dataTable') dataTable!:any;
  @Ref('DataApprovalModal') DataApprovalModal!:any;
  @Ref('errorModal') errorModal!:any;
  private categoryId:any = '';
  private categoryLevel:any = '';
  private formData:any = {
    dataStatus:'',
    errorLevel:'',
    checkErrorLevel:'',
    editCases:'',
    checkCases:'',
    areaId:'',
    code:'',
    createBy:'',
    originId:'',
    checkResult:'',
    categoryId:'',
    bigCategoryId:'',
    workId:'',
    midCategoryId:''
  }
  workId:any ='';
  private status: any = '0';
  private cityValue: any = '';
  private cityList: any = [
    {
      value: '0471',
      label: '呼和浩特市'
    }
  ]
  columns: any = [];

  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: true, // 是否支持列表项选中功能
  };


  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      // {
      //   label: '查看',
      //   type: 'text',
      //   icon: 'el-icon-tickets',
      //   plain: true,
      //   permission: 'bus:category:edit',
      //   disabled: (index: any, row: any) => {
      //     return false;
      //   },
      //   method: (index: any, row: any) => {
      //     console.log(index, row)
      //   }
      // },
      {
        label: '标错',
        type: 'text',
        icon: 'el-icon-document-delete',
        plain: true,
        permission: 'bus:data:edit',
        style:{
          color:'red'
        },
        disabled: (index: any, row: any) => {
          return row && row.id === 221;
        },
        method: (index: any, row: any) => {
          this.showErrorModal('1',{multipleSelection: [row]})
        }
      },
      {
        label: '撤销标错',
        type: 'text',
        icon: 'iconfont icon-y-jingpinceshibaogaoshujudaochu',
        plain: true,
        permission: 'bus:data:edit',
        disabled: (index: any, row: any) => {
          return row && row.id === 221;
        },
        method: (index: any, row: any) => {
          this.showErrorModal('0',{multipleSelection: [row]})
        }
      }
    ]
  };

  private handleSelectionChange(val) {
    console.log(val);
  }
  getTitle(structureId?){
    if(structureId){
      getApprovalTitle({id:structureId}).then(res =>{
      this.columns = res.data;
      if(this.dataTable){
        this.dataTable.refresh();
      }
    })
    }else{
      getApprovalTitle().then(res =>{
      this.columns = res.data;
      if(this.dataTable){
        this.dataTable.refresh();
      }
    })
    }
   
  }
  categoryCheckHandler(data){

    this.categoryId = data.id;
    const id = data.id;
    const {level,code,rootId } = data.extra;
    this.categoryLevel = level;
    this.formData.workId =rootId;
    if(code){
      this.getTitle(code);
      this.formData.categoryId =id;
      this.workId = rootId;
   
    }else{
      this.getTitle();
      this.formData.categoryId = null;
      switch(level){
        case 2:
            this.formData.midCategoryId =id;
          break;
        case 1:
            this.formData.bigCategoryId =id;
          break;
        default:
            this.formData.workId = id;
          break;
      }
    }
  }
  statusChangeHandler(status){
    this.dataTable.refresh();
  }

  search(){
    this.dataTable && this.dataTable.refresh();
  }
  showApprovalModal(status){
    const {multipleSelection} = this.dataTable || {};
    if(!multipleSelection.length){
      this.$message.warning('请选择一条数据');
      return;
    }
    const ids = multipleSelection.map(item =>item.id);
    this.DataApprovalModal.showModal('通过',multipleSelection && multipleSelection.length ? ids : [],status);
  }

  showErrorModal(status,row){
    const {multipleSelection} = row || this.dataTable;
    if(!multipleSelection.length){
      this.$message.warning('请选择一条数据');
      return;
    }

    const ids = multipleSelection.map(item =>item.id);
    this.errorModal.showModal('通过',multipleSelection && multipleSelection.length ? ids : [],status);
  }
}
</script>
<style lang="scss" scoped>
.dataAudit {
  display: flex;
  gap: 10px;
  margin-right: 0px;
  margin-left: 0px;
  .ha-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .radio-t {
      display: flex;
      align-items: center;
      gap: 6px;

      span {
        font-size: 14px;
      }
    }
  }
  .el-card__body {
    padding: 0px 5px 0px 5px  !important;
  }
}
.header_div{
  display: flex;align-items: center;justify-content: space-between;
  padding-top: 5px;
}

::v-deep .el-card__header {
  padding: 0px 20px 0px 6px;
}

::v-deep .el-card__body{
  padding: 6px 20px 0px 6px;
}
</style>
